<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/app.css" />
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css">
    <link href="../script/swiper/swiper.min.css" rel="stylesheet" />
    <style type="text/css">
    html,body{
        height: auto;
    }
    
    .movie_float_re{position: relative;}
    .movie_float_ab{ position: absolute;right: 4px;
		bottom: 55px;
		padding: 2px 6px;
		background: rgba(0,0,0,.8);
		color: #fff;
		border-radius: 2px;
		right:5px;

	}
    .swiper-pagination { bottom: -5px !important; }

    </style>
</head>
<body class="H-theme-background-color-white">
	<!--fb8c3c 3ab3eb  f60034 f1af14-->

<div class="H-padding-vertical-bottom-10"></div>
	<div class="">
	<!--banner轮播图片-->
    <div class=" H-swiper H-position-relative H-width-100-percent H-box-sizing-border-box H-overflow-scrolling" style="height:160px;">
        <div class=" swiper-container  swiper-normal H-position-absolute H-width-100-percent H-height-100-percent">
            <div class="swiper-wrapper" id="banner">
                <!--<div class="swiper-slide H-border-radius-5"><img src="http://house-app-1251064482.piccd.myqcloud.com/20181115/3e97336d2e527629a24178c53cb53981.png_500x500" class="H-border-radius-5 H-width-100-percent H-height-100-percent" /></div>
                <div class="swiper-slide H-border-radius-3"><img src="http://house-app-1251064482.piccd.myqcloud.com/20181115/3e97336d2e527629a24178c53cb53981.png_500x500" class="H-width-100-percent H-height-100-percent" /></div>
                -->
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
    </div>
  
  <div class="H-padding-vertical-bottom-10"></div>
  	<div class="H-font-size-12 H-theme-font-color-333 H-position-relative H-width-100-percent H-box-sizing-border-box H-overflow-scrolling" >
       
            <div class="H-flexbox-horizontal H-text-align-center  H-padding-vertical-both-10">
                <div class="H-flex-item" onclick="$app.openWinByUrl('shop_list','shop_list',{ 'type_id':'ds','title':'电视剧'})">
                    <span class="H-icon H-center-all  H-border-radius-15 H-margin-horizontal-auto" style="height: 40px; width: 40px; "><i class="H-iconfont"><img  src="../image/menu1.png" style="border-radius:5px;width:38px;height:38px;" /></i></span>
                    <label class="H-display-block  H-margin-vertical-top-5">电视剧</label>
                </div>
                <div class="H-flex-item" onclick="$app.openWinByUrl('shop_list','shop_list',{ 'type_id':'dy', 'title':'电影'})">
                    <span class="H-icon H-center-all  H-border-radius-15 H-margin-horizontal-auto" style="height: 42px; width: 42px; "><i class="H-iconfont"><img  src="../image/menu2.png" style="border-radius:5px;width:40px;height:40px;" /></i></span>
                    <label class="H-display-block  H-margin-vertical-top-5">电影</label>
                </div>
                <div class="H-flex-item" onclick="$app.openWinByUrl('shop_list','shop_list',{ 'type_id':'zy', 'title':'综艺'})">
                    <span class="H-icon H-center-all  H-border-radius-15 H-margin-horizontal-auto" style="height: 42px; width: 42px; "><i class="H-iconfont"><img  src="../image/menu3.png" style="border-radius:5px;width:40px;height:40px;" /></i></span>
                    <label class="H-display-block  H-margin-vertical-top-5">综艺</label>
                </div>
                <div class="H-flex-item" onclick="$app.openWinByUrl('shop_list','shop_list',{ 'type_id':'dm', 'title':'动漫'})">
                    <span class="H-icon H-center-all  H-border-radius-15 H-margin-horizontal-auto" style="height: 42px; width: 42px; "><i class="H-iconfont"><img  src="../image/menu4.png" style="border-radius:5px;width:40px;height:40px;" /></i></span>
                    <label class="H-display-block H-margin-vertical-top-5">动漫</label>
                </div>
    
            </div>
    </div>
    <div class="H-padding-vertical-bottom-10"></div>
    
    <div class="H-channel-title H-flexbox-horizontal H-theme-background-color-white H-vertical-middle">
        <div class="H-channel-line  H-padding-vertical-top-3 H-padding-horizontal-left-3  H-margin-horizontal-left-10">
        	<span class="H-icon H-display-block H-float-left H-z-index-10 ">
        		<img class="H-iconfont" style="width:16px;height:16px;"  src="../image/hot.png" />
        	</span>
        </div>
        <div class="H-channel-text H-font-weight-bold H-theme-font-color-black H-flex-item H-font-size-16 H-theme-font-color-333 H-padding-10 H-margin-horizontal-right-10 H-text-show-row-1" style="padding-left: 3px;">电视剧推荐</div>
    </div>
    
    <script  id="listtmp" type="text/x-dot-template">
	    {{? it && it.length > 0}}<!--it 就是传入的数组data 这里判断是否为真，数组元素是否大于0个 ?相当于if-->
			{{~ it :v}}<!--it 相当如js的foreach v就是data数组中的一个元素-->
	    		<div  style="height:145px;border-radius: 3px;" onclick="$app.openWinByUrl('shop_detail','shop_detail',{'title':'{{= v.title}}','img':'{{= v.img}}', 'url':'{{= v.url}}' , 'type':'ds'  })" class="movie_float_re  H-display-table-cell H-width-avg-2 H-float-left H-box-sizing-border-box H-padding-horizontal-both-5">
	                <img src="{{= v.img}}" class=" H-display-block H-width-100-percent" style="border-radius: 3px;height:90px;">
	                <div class="H-text-show-row-1  H-font-size-14">{{= v.title}}</div>
	                <span class="H-text-show-row-1 H-font-size-14 H-theme-font-color-ccc ">{{= v.desc}}</span>
	                <div class="movie_float_ab H-font-size-12">{{= v.update}}</div>
	            </div>
	       {{~}}
		{{?}}<!--相当于/if -->
    </script>
    <script  id="zylisttmp" type="text/x-dot-template">
	    {{? it && it.length > 0}}<!--it 就是传入的数组data 这里判断是否为真，数组元素是否大于0个 ?相当于if-->
			{{~ it :v}}<!--it 相当如js的foreach v就是data数组中的一个元素-->
	    		<div  style="height:145px;border-radius: 3px;" onclick="$app.openWinByUrl('shop_detail','shop_detail',{ 'title':'{{= v.title}}','img':'{{= v.img}}','url':'{{= v.url}}' , 'type':'zy'  })" class="movie_float_re  H-display-table-cell H-width-avg-2 H-float-left H-box-sizing-border-box H-padding-horizontal-both-5">
	                <img src="{{= v.img}}" class=" H-display-block H-width-100-percent" style="border-radius: 3px;height:90px;">
	                <div class="H-text-show-row-1  H-font-size-14">{{= v.title}}</div>
	                <span class="H-text-show-row-1 H-font-size-14 H-theme-font-color-ccc ">{{= v.desc}}</span>
	                <div class="movie_float_ab H-font-size-12">{{= v.update}}</div>
	            </div>
	       {{~}}
		{{?}}<!--相当于/if -->
    </script>
    <script  id="dmlisttmp" type="text/x-dot-template">
	    {{? it && it.length > 0}}<!--it 就是传入的数组data 这里判断是否为真，数组元素是否大于0个 ?相当于if-->
			{{~ it :v}}<!--it 相当如js的foreach v就是data数组中的一个元素-->
	    		<div  style="height:145px;border-radius: 3px;" onclick="$app.openWinByUrl('shop_detail','shop_detail',{'title':'{{= v.title}}','img':'{{= v.img}}', 'url':'{{= v.url}}' , 'type':'dm'  })" class="movie_float_re  H-display-table-cell H-width-avg-2 H-float-left H-box-sizing-border-box H-padding-horizontal-both-5">
	                <img src="{{= v.img}}" class=" H-display-block H-width-100-percent" style="border-radius: 3px;height:90px;">
	                <div class="H-text-show-row-1  H-font-size-14">{{= v.title}}</div>
	                <span class="H-text-show-row-1 H-font-size-14 H-theme-font-color-ccc ">{{= v.desc}}</span>
	                <div class="movie_float_ab H-font-size-12">{{= v.update}}</div>
	            </div>
	       {{~}}
		{{?}}<!--相当于/if -->
    </script>
    
    <script  id="dylisttmp" type="text/x-dot-template">
	    {{? it && it.length > 0}}<!--it 就是传入的数组data 这里判断是否为真，数组元素是否大于0个 ?相当于if-->
			{{~ it :v}}<!--it 相当如js的foreach v就是data数组中的一个元素-->
	    		<div style="height: 220px;border-radius: 3px;" onclick="$app.openWinByUrl('shop_detail','shop_detail',{'title':'{{= v.title}}','img':'{{= v.img}}', 'url':'{{= v.url}}' , 'type':'dy'  })" class="movie_float_re  H-display-table-cell H-width-avg-2 H-float-left H-box-sizing-border-box H-padding-horizontal-both-5">
	                <img src="{{= v.img}}" class=" H-display-block H-width-100-percent" style="border-radius: 3px;height:170px;">
	                <div  class="H-text-show-row-1  H-font-size-14">{{= v.title}}</div>
	                <span class="H-text-show-row-1 H-font-size-14 H-theme-font-color-ccc ">{{= v.desc}}</span>
	                {{? v.update}} <div class="movie_float_ab H-font-size-12">{{= v.update}}</div> {{?}}
	            </div>
	       {{~}}
		{{?}}<!--相当于/if -->
    </script>
    
    <div id="list" class="H-display-table H-width-100-percent H-clear-both H-box-sizing-border-box H-padding-horizontal-both-5">
    	 
    	 
    </div>
    
    
    <div class="H-padding-vertical-bottom-10"></div>
    
    <div class="H-channel-title H-flexbox-horizontal H-theme-background-color-white H-vertical-middle">
        <div class="H-channel-line  H-padding-vertical-top-3 H-padding-horizontal-left-3  H-margin-horizontal-left-10">
        	<span class="H-icon H-display-block H-float-left H-z-index-10 ">
        		<img class="H-iconfont" style="width:16px;height:16px;"  src="../image/hot.png" />
        	</span>
        </div>
        <div class="H-channel-text H-font-weight-bold H-theme-font-color-black H-flex-item H-font-size-16 H-theme-font-color-333 H-padding-10 H-margin-horizontal-right-10 H-text-show-row-1" style="padding-left: 3px;">电影推荐</div>
    </div>
    
   
    
    <div id="dylist" class="H-display-table H-width-100-percent H-clear-both H-box-sizing-border-box H-padding-horizontal-both-5">
    	 
            
    </div>
    
    <div class="H-padding-vertical-bottom-10"></div>
    
    <div class="H-channel-title H-flexbox-horizontal H-theme-background-color-white H-vertical-middle">
        <div class="H-channel-line  H-padding-vertical-top-3 H-padding-horizontal-left-3  H-margin-horizontal-left-10">
        	<span class="H-icon H-display-block H-float-left H-z-index-10 ">
        		<img class="H-iconfont" style="width:16px;height:16px;"  src="../image/hot.png" />
        	</span>
        </div>
        <div class="H-channel-text H-font-weight-bold H-theme-font-color-black H-flex-item H-font-size-16 H-theme-font-color-333 H-padding-10 H-margin-horizontal-right-10 H-text-show-row-1" style="padding-left: 3px;">综艺推荐</div>
    </div>
    
     
    
    
    <div id="zylist" class="H-display-table H-width-100-percent H-clear-both H-box-sizing-border-box H-padding-horizontal-both-5">
    	 
            
    </div>
    
    <div class="H-padding-vertical-bottom-10"></div>
    
    <div class="H-channel-title H-flexbox-horizontal H-theme-background-color-white H-vertical-middle">
        <div class="H-channel-line  H-padding-vertical-top-3 H-padding-horizontal-left-3  H-margin-horizontal-left-10">
        	<span class="H-icon H-display-block H-float-left H-z-index-10 ">
        		<img class="H-iconfont" style="width:16px;height:16px;"  src="../image/hot.png" />
        	</span>
        </div>
        <div class="H-channel-text H-font-weight-bold H-theme-font-color-black H-flex-item H-font-size-16 H-theme-font-color-333 H-padding-10 H-margin-horizontal-right-10 H-text-show-row-1" style="padding-left: 3px;">动漫推荐</div>
    </div>
    
    
    <div id="dmlist" class="H-display-table H-width-100-percent H-clear-both H-box-sizing-border-box H-padding-horizontal-both-5">
    	 
            
    </div>
    
    
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../script/app.js"></script>

<script type="text/javascript" src="../script/swiper/swiper.min.js"></script>
<script type="text/javascript" src="../script/iscroll.js"></script>

<script type="text/javascript" src="../script/doT.js"></script>
<script type="text/javascript">


	$(function(){
		


	});
	
	function bodyScroll(event){
        event.preventDefault();
    }
    

	
    
    
	var sysconfig = "";//获取系统配置参数 , 参数内容在后台接口获取
    apiready = function(){
    	sysconfig = $api.getStorage('sysconfig');
		api.parseTapmode();
		
	
		//获取banner
		index();
		
		banner();
		
		
    };
    
    
    function banner(){
    	$app.ajax($app.serverUrl+"index/index/banner",{},'post',function(ret){
			if( ret.code == 1000){
				var strVar = "";
				$(ret.data).each(function(k,v){
    				strVar += "<div onclick=\" openUrl( '"+v.img_url+"');\" class=\"swiper-slide\"><img src=\""+v.img_path+"\" class=\"H-width-100-percent H-height-100-percent H-border-radius-5 \" /><\/div>\n";
				});
				$("#banner").html(strVar);
			}
			
			//	轮播图切换
			var swiper = new Swiper('.swiper-normal', {
		        pagination: '.swiper-pagination',
		        loop: true
		    });
		});
    }
    
    function index(){
    	$app.ajax($app.serverUrl+"index/index/index",{},'post',function(ret){
			if( ret.code == 1000){
				var evalText = doT.template($("#listtmp").text());
				$("#list").html(evalText(ret.result.ds));
				
				var dyevalText = doT.template($("#dylisttmp").text());
				$("#dylist").html(dyevalText(ret.result.dy));
				
				var evalText = doT.template($("#zylisttmp").text());
				$("#zylist").html(evalText(ret.result.zy));
				
				var evalText = doT.template($("#dmlisttmp").text());
				$("#dmlist").html(evalText(ret.result.dm));
			}
		});
    } 
    
    
    function openUrl( url ){
    
    	if(url.substr(0,7).toLowerCase()=="http://"  || url.substr(0,8).toLowerCase()=="https://" ){
			url = url;
			
			var browser = api.require('webBrowser');
			browser.open({
			    url: url,
			    scaleEnabled:false,
			    titleBar:{
			    	bg:"#fff",
			    	textColor:"#333",
			    },
			    progress:{
			    	color:"#86a7f2"
			    }
			});
		}else{
			//$app.openWinByUrl('shop_detail','shop_detail',{'id': url  })
		}
		
		
    }
    
    


	
</script>
</html>